<template>
    <div>
        <!-- 返回图标 -->
        <div class="qcfd">
            <div class="fda" @click="fh">
                <!-- <router-link to="/home/shezhi">  </router-link> -->
                <van-icon name="share" class="fhtb" />
            </div>
            <span class="fanhui">我的收藏</span>
        </div>
        <div>
            <div>
                <van-tabs v-model="active2" @click="onClick">
                    <van-tab title="单词本">
                        <!-- 单词本数据 -->
                        <!-- <div v-for="(item, index) in shujv" :key="index">
            -- BUG--   父组件路由冒泡未解决,无法阻止父组件的路由捕获 (该BUG已解决，代码暂时留着)
              <router-link :to="'/danciben/' + item.id">
                <div class="b">
                  <Dcb :sz="item"></Dcb>
                </div>
            
            </div> -->

                        <!-- 单词本数据 -->
                        <div v-for="(item, index) in shujv" :key="index">
                            <div class="b" @click="get(item.id)">
                                <Dcb :sz="item" :cunz="cunz"></Dcb>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="单词">
                        <!-- 单词部分 -->
                        <div style="margin-bottom: 100px">
                            <div v-for="(item, value) in dcbsj2" :key="value">
                                <Dc @dc="hqhy" :xr2="item" :guanbi="false"></Dc>
                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <!-- 音频，接口采用有道词典 http://dict.youdao.com/dictvoice?audio=   -->
        <div>
            <audio controls="controls" hidden="true" preload ref="audio">
                <!-- src动态绑定 -->
                <source :src="'http://dict.youdao.com/dictvoice?audio=' + dc" type="audio/mp3" />
                <source src="song.ogg" type="audio/ogg" />
            </audio>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

import Dcb from "@/components/dcbzj.vue";
// // 导入单词的单元格组件
import Dc from "@/components/dc.vue";

export default {
    // 这里要获取服务器单词本和收藏单词的数据,格式如下
    // 收藏本
    /*  shujv: {
       a: {
         id: 1,
         dcs: '123',//单词数量
         bt: 'js常见单词',//单词表的标题
         img: 'https://img01.yzcdn.cn/vant/cat.jpeg'//单词表的图片
       },
       b: {
         id: 2,
         dcs: '233',
         bt: 'css常见单词',
         img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
   
       },
       c: {
         id: 3,
         dcs: '2133',
         bt: 'jquer常见单词',
         img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
   
       }
     }
     单词收藏数据
   dcbsj: {
          xr1: {
            id: 1,
            dc: 'abcdsadsadasdsad',
            label: '1侦听2器2'
          },
          xr2: {
            id: 2,
            dc: 'okokok',
            label: '2侦听2器2'
          },
          xr3: {
            id: 3,
            dc: 'abcdsadsadasdsad',
            label: '3侦听2器2'
          },
        }
     
     */
  props: ["cunz"],
    data() {
        return {
            // 分页栏默认选中第一页
            active2: 0,
            dc: "a",
            // 单词本数据
            shujv: [],
            // 从后端获取数据，暂时弃用
            /*  dcbsj: {
              xr1: {
                id: 1,
                dc: "abcdsadsadasdsad",
                label: "1侦听2器2",
              },
      
              xr2: {
                id: 2,
                dc: "okokok",
                label: "2侦听2器2",
              },
              xr3: {
                id: 3,
                dc: "abcdsadsadasdsad",
                label: "3侦听2器2",
              },
              xr4: {
                id: 3,
                dc: "abcdsadsadasdsad",
                label: "3侦听2器2",
              },
              xr5: {
                id: 3,
                dc: "abcdsadsadasdsad",
                label: "3侦听2器2",
              },
              xr6: {
                id: 3,
                dc: "abcdsadsadasdsad",
                label: "3侦听2器2",
              },
              xr7: {
                id: 3,
                dc: "abcdsadsadasdsad",
                label: "3侦听2器2",
              },
              xr8: {
                id: 3,
                dc: "abcdsadsadasdsad",
                label: "3侦听2器2",
              },
            }, */
            // 离线收藏数据
            dcbsj2: [],
        };
    },
    computed: {
        // dcbsj为vuex储存的单词表数据，被直接渲染在html中，编写离线版时要注意
        ...mapState(["active", "wdsc"]),
    },
    methods: {
        ...mapMutations(["csj2"]),
        // 把子组件的单词赋值给data里的dc
        hqhy(val) {
            this.dc = val;
            let url = "http://dict.youdao.com/dictvoice?audio=" + this.dc;
            this.$refs.audio.src = url;
            this.faying();
        },
        faying() {
            this.$refs.audio.play();
        },
        fh() {
            this.$router.back();
        },
        get(id) {
            console.log(id, "id");
            // 把id上传到store，过滤出想要的数据填充
            this.csj2(id);
            this.$router.push({
                path: "/danciben/" + id,
            });
            this.$route.meta.keepAlive = true;
        },
        // 处理收藏单词本数据
        chuli() {
            console.log('删除测试')
            this.wdsc.dcb.forEach((item) => {
                let sj = {
                    id: item.id,
                    dcs: item.data.length,
                    bt: item.name + "常用单词",
                    img: "https://img01.yzcdn.cn/vant/cat.jpeg",
                };
                this.shujv.push(sj);
                console.log(item, "item");
            });
            console.log(this.wdsc, "wdsc");
            this.wdsc.dc.forEach((item) => {
                this.dcbsj2.push(item);
            });
        },
        onClick(title) {
            console.log(title);
            sessionStorage.setItem("title", title);
        },
        duanz() {
            // 保存选中状态
            let a = Number(sessionStorage.getItem("title"));
            this.active2 = a
        },
    },
    created() {
        this.chuli();
    },
    mounted() {
        this.duanz();
    },
    components: {
        Dcb,
        Dc,
    },
};
import Vue from "vue";
import { Tab, Tabs, Toast } from "vant";
Vue.use(Tab);
Vue.use(Tabs);
</script>

<style lang="less" scoped>
.fhtb {
    margin-left: 8px;
    margin-top: 8px;
    color: rgb(16, 168, 238);
    font-size: 38px;
    transform: rotateY(180deg);
}

.fanhui {
    display: block;
    color: black;
    font-weight: 700;
    text-align: center;
    font-size: 20px;
    line-height: 46px;
}

.b {
    margin-top: 3px;
    box-sizing: border-box;
    position: relative;
}

.fda {
    position: absolute;
}

.qcfd:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
</style>